<div id="content_header">
  <h3>Register a new product</h3>
</div>

<pre>
  {{ newItem }}
</pre>

<div class="row">
  <form name="form" role="form" ng-submit="add()">

    <div class="form-group">
    <label for="Name">
        Product Name
      </label>
      <span class="error" ng-show="form.Name.$error.required">Required!</span>
      <input type="text" name="Name" class="form-control" id="Name" placeholder="Input field" ng-model="newItem.Name" required>
    </div>

    <div class="form-group">
    <label for="Code">
        Code
      </label>
      <span class="error" ng-show="form.Code.$error.required">Required!</span>
      <input type="text" name="Code" class="form-control" id="Code" placeholder="Input field" ng-model="newItem.Code" required>
    </div>

    <div class="form-group">
    <label for="ProductPrice">
        Price
      </label>
      <span class="error" ng-show="form.ProductPrice.$error.required">Required!</span>
      <input type="text" name="ProductPrice" class="form-control" id="ProductPrice" placeholder="Input field" ng-model="newItem.ProductPrice[0].Price" required>
    </div>

    <div class="form-group">
      <label for="Id">
        Unit
      </label>
      <select name="" class="form-control" id="Id" ng-model="newItem.Unit.Id" ng-options="unit.Id as unit.Name for unit in units" required>
        <option value="" ng-hide="newItem.Unit.Id">Select a unit.</option>
      </select>
    </div>

    <div class="form-group">
      <label for="Id">
        Product Category
      </label>
      <select name="" class="form-control" id="Id" ng-model="newItem.ProductCategory.Id" ng-options="category.Id as category.Name for category in categories" required>
        <option value="" ng-hide="newItem.ProductCategory.Id">Select a category.</option>
      </select>
    </div>

    <button type="submit" class="btn btn-primary" >Submit</button>
  </form>
</div>